<template>
  <article class="container">
    <search-form ref="searchForm" :form="search" @fetchData="fetchData">
      <FormItem prop="key">
        <Input type="text" v-model="search.key" placeholder="Key关键字" />
      </FormItem>
      <FormItem prop="name">
        <Input type="text" v-model="search.name" placeholder="名称关键字" />
      </FormItem>
    </search-form>
    <article class="table-data">
      <Table row-key="id"  :columns="columns" :data="list">
        <template #icon="{ row }">
          <Icon :type="row.icon" />
        </template>
      </Table>
      <pagination :page="page" @on-change="fetchData"/>
    </article>
  </article>
</template>
<script>
import {mapState, mapActions} from 'vuex'
import util from "@/libs/util";
import searchForm from '@/components/common/searchForm.vue'
import pagination from '@/components/common/pagination.vue'
import admin from "@/api/admin";

export default {
  name: 'index',
  components: {
    pagination,
    searchForm
  },
  data() {
    return {
      search: {
        key: '',
        name: ''
      },
      columns: [
        {
          title: 'ID',
          key: 'id',
          tree: true
        },
        {
          title: 'Icon',
          slot: 'icon'
        },
        {
          title: '名称',
          key: 'name'
        },
        {
          title: '链接',
          key: 'link'
        },
        {
          title: 'Key',
          key: 'key'
        }
      ],
    };
  },
  computed: {
    ...mapState({
      list: state => state.menus.list,
      page: state => state.menus.page,
    })
  },
  mounted() {
    this.$refs.searchForm.handleSearch();
  },
  methods: {
    ...mapActions(['getMenusList']),
    // 查询
    fetchData() {
      this.getMenusList({include: 'children'});
    },
    // 跳转
    toPathLink(name) {
      this.$router.push({
        path: name
      });
    }
  }
};
</script>
